<template>
  <view class="dynamic-detail">
    <!-- 顶部导航 -->
    <view class="header">
    
      <h3>文章详情</h3>
    </view>
    
    <!-- 用户信息 -->
	<detailuser-info :obj="userdata"></detailuser-info>
    
    <!-- 动态内容 -->
    <view class="dynamic-content">
		<rich-text :nodes="pagedata.obj.content || ''"></rich-text>
      <!-- <p class="description">
		  {{showcontent}}
      </p> -->
      
     <!-- 图片区域
      <view class="images">
        <image src="https://via.placeholder.com/120x120?text=图片1" alt="作品图片">
        <image src="https://via.placeholder.com/120x120?text=图片2" alt="作品图片">
        <image src="https://via.placeholder.com/120x120?text=图片3" alt="作品图片">
      </view> -->
    </view>
    
    <!-- 评论统计 -->
    <view class="comment-stats">
      <text>全部评论</text>
      <text>{{ comments.length || 0}}条评论</text>
    </view>
    
    <!-- 评论列表 -->
    <view class="comments-section">
	  <view v-for="(comment, index) in comments" :key="index">
		   <comment :comment="comment"></comment>
	  </view>
	 
    </view>
    <view class="padd"></view>
    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="comment-input-container">
        <input type="text" placeholder="添加评论..." class="comment-input" v-model="com.value" >
      </view>
      <view class="action-icons">   
	   <view class="action-item">
		   <button @click="addreview">评论</button>
	   </view>

      </view>
    </view>
  </view>
</template>

<script>
	import detailuserInfo from "@/component/detail/detail2/userinfo.vue"
	import comment from "@/component/detail/detail2/comment.vue"
	import myquest from "@/untils/request.js"
	import strTool from "@/untils/strTool.js"
import loginVue from "../../pages/router/login/login.vue"
export default {
	components:{
		detailuserInfo,
		comment
	},
  name: 'Detail2',
  data() {
    return {
		pagedata:null,
		userdata:null,
	  com:{
		value:""  
	  },
	  creaters:[],
      comments: []
    }
  },
  computed:{
	showcontent(){
		return this.pagedata?.obj.content
	}  
  },
  methods:{
	  //跳转到处理
	  handlenav(data){
		this.pagedata = data   //页面对象
		myquest.getuserbyid(this.$store.state.token,this.pagedata.obj.id).then((res)=>{
			this.userdata = res.data.data
			this.userdata.time = this.pagedata.obj.updateTime
			this.getcomment()
		})
	  },
	  //添加评论
	  addreview(){
		  if(!this.com.value) return
		  console.log( this.$store.state);
	
		myquest.addcomment(this.$store.state.token,this.pagedata.obj.id,this.com.value)
		.then((res)=>{
			
			if(!res.data.code){
				this.com.value = ""
				this.getcomment()
			}else{
				uni.showToast({
					title:"网络不佳",
					icon:"fail"
				})
			}
		})
		
	  },
	  //获取评论
	  getcomment(){
		  myquest.getcomment(this.$store.state.token,this.pagedata.obj.id).then((r)=>{
			  // console.log(r.data.data);
			  this.comments = r.data.data
			  uni.stopPullDownRefresh()
		  })
	  },
	  pullDownRefresh() {
	  	this.userdata = null
	  	this.com.value = ""  
	  	this.comments=[]
	  	this.handlenav(this.pagedata)
	  }
  },
	mounted(option) {
		uni.$on("todetail",this.handlenav)
		uni.$on("detaailrefresh",this.pullDownRefresh)
		
	},
	beforeDestroy() {
		uni.$off("todetail")
		uni.$off("detaailrefresh")
	}
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

.dynamic-detail {
  background-color: #fff;
  min-height: 100vh;
  max-width: 500px;
  margin: 0 auto;
  color: #333;
}

/* 头部导航 */
.header {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.back-icon {
  font-size: 24px;
  margin-right: 15px;
  font-weight: bold;
}

.header h3 {
  font-size: 18px;
  font-weight: 500;
}

/* 动态内容 */
.dynamic-content {
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.description {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #333;
}

.images {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.images image {
  width: 32%;
  height: 120px;
  border-radius: 5px;
  object-fit: cover;
  background: #f5f5f5;
}

/* 评论统计 */
.comment-stats {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid #f0f0f0;
  background: #f8f8f8;
}

/* 底部操作栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 8px 15px;
  background-color: #fff;
  border-top: 1px solid #f0f0f0;
}

.padd{
	width: 100%;
	height: 70px;
}

.comment-input-container {
  flex: 1;
  margin-right: 10px;
}

.comment-input {
  width: 100%;
  padding: 10px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 18px;
  background-color: #f5f5f5;
  font-size: 15px;
}

.action-icons {
  display: flex;
  align-items: center;
}

.action-item {
  display: flex;
  align-items: center;
  margin-left: 18px;
  font-size: 18px;
}

.action-item .count {
  margin-left: 4px;
  font-size: 14px;
  color: #666;
}

/* 图标样式 */
.like-icon {
  color: #f56c6c;
}

.comment-icon {
  color: #909399;
}

.share-icon {
  color: #67c23a;
}

@media (max-width: 375px) {
  .comment-item .avatar {
    width: 36px;
    height: 36px;
  }
  
  .dynamic-content {
    padding: 10px;
  }
  
  .comment-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .reply-btn {
    margin-top: 5px;
  }
}
</style>